<template>
  <van-nav-bar :title="t('home.退件上架')" left-arrow @click-left="onClickLeft" />
  <div class="mx-auto mb-20">
    <van-cell-group>
      <van-field
        v-model="scan_storage_block"
        :label="t('returnShift.库位')"
        :placeholder="t('returnShift.请扫描库位')"
        @clear="clearScanStorageBlock"
        @keydown.enter="handleStorageBlockScan"
        id="scan_storage_block"
      />
      <van-field
        v-model="scan_order"
        :label="t('returnShift.退件单号')"
        :placeholder="t('returnShift.请扫描退件单号')"
        @keydown.enter="handleScan"
        id="scan_order"
      />

      <van-field>
        <template #input>
          <van-col span="8">
            <van-tag>{{ t("total") }}:{{ dataList.length }}</van-tag>
          </van-col>
          <van-col span="8">
            <van-tag type="success"
              >{{ t("success") }}:{{ dataList.filter((i) => i.status).length }}</van-tag
            >
          </van-col>
          <van-col span="8">
            <van-tag type="danger"
              >{{ t("fail") }}:{{ dataList.filter((i) => !i.status).length }}</van-tag
            >
          </van-col>
        </template>
      </van-field>

    <van-field>
        <template #input>
          <van-col span="12"> {{ t("returnShift.退件单号") }} </van-col>
          <van-col span="12">
          {{ t("returnShift.操作记录") }}
            <!-- <van-tag  
              >{{ dataList.length }}</van-tag>
              <van-tag  type="success"
              >{{ dataList.filter(i=>i.status).length }}</van-tag>
              <van-tag  type="danger"
              >{{ dataList.filter(i=>!i.status).length }}</van-tag> -->
          </van-col>
        </template>
      </van-field>

      

      <template v-if="dataList.length > 0">
        <template v-for="item in dataList" :key="item.id">

          <van-field 
          >
            <template #input>
              <van-col span="12"  :style="
              item.status
                ? 'color:green;'
                : 'color:red;'
            ">
              {{ item.packageNo }}
              <div></div>
              <span class="p-1 text-sm text-gray-300 rounded-md">
                {{ t("returnShift.库位") }}:{{ item.storageBlock }}</span
              >
            </van-col>
            <van-col span="12"  :style="
              item.status
                ? 'color:green;'
                : 'color:red;'
            ">
              {{ item.info }}
            </van-col>
            </template>
          </van-field>
 
        </template>
      </template>
      <van-empty v-else :description="t('noData')" :image="img_index_path" />
    </van-cell-group>
    <!-- <div class="absolute inset-x-0 bottom-0 flex w-full p-5 mx-auto bg-white-100">
    <van-button type="success" size="small" @click="()=>{clearData()}"  class="w-full p-8" >{{t('returnShift.清除')}}</van-button>
  </div> -->
    <div class="absolute inset-x-0 bottom-0">
      <van-field>
        <template #input>
          <van-button
            type="success"
            size="small"
            @click="
              () => {
                clearData();
              }
            "
            class="w-full"
            >{{ t("returnShift.清除") }}</van-button
          >
        </template>
      </van-field>
    </div>
  </div>
</template>

<script setup lang="ts">
import img_index_path from "~/noData.png";
// import router from "@/router";
// import { useStore } from "@/stores";
// import Vue from 'vue';
// Vue.use(Toast);
import {
  postRequest,
  // , postRequest, getRequest
} from "@/api";
import { useI18n } from "vue-i18n";
// import { showNotify, showFailToast } from "vant";
import // STORAGE_TOKEN_KEY,
// STORAGE_LANG_KEY,
// STORAGE_PRINTER_KEY,
"@/stores/mutation-type";
import { AppToast } from "@/utils/appToast";
import { DEPOT_CODE } from "@/utils/constant";
const { t } = useI18n();

// onload
onMounted(() => {
  console.log("mounted in the composition api!");
  const scan_storage_block_el = document.getElementById("scan_storage_block");
  scan_storage_block_el.focus();
});

// const store = useStore();
const onClickLeft = () => history.back();
// const scan = ref("");
const scan_storage_block = ref("");
const scan_order = ref("");
const dataList = ref([]);

const clearData = () => {
  scan_storage_block.value = "";
  scan_order.value = "";
  dataList.value = [];
  setTimeout(() => {
    const scan_storage_block_el = document.getElementById("scan_storage_block");
    scan_storage_block_el.removeAttribute("readonly");
    scan_storage_block_el.focus();
  }, 500);
};
const clearScanStorageBlock = () => {
  const scan_storage_block_el = document.getElementById("scan_storage_block");
  //设置 可读写
  scan_storage_block_el.removeAttribute("readonly");
};
const handleStorageBlockScan = () => {
  if (!scan_storage_block.value) {
    AppToast(t("returnShift.请扫描库位"), "danger", true);
    return;
  }
  //vue 聚焦到退件单号
  const scan_order_input = document.getElementById("scan_order");
  scan_order_input.focus();

  const scan_storage_block_el = document.getElementById("scan_storage_block");
  //设置 readonly
  scan_storage_block_el.setAttribute("readonly", "readonly");
};
const handleScan = () => {
  if (!scan_storage_block.value) {
    AppToast(t("returnShift.请扫描库位"), "danger", true);
    return;
  }

  // scan.value   如果是 -K 或者 -R结尾 ，则去掉
  if (scan_order.value.endsWith("-K") || scan_order.value.endsWith("-R")) {
    scan_order.value = scan_order.value.substring(0, scan_order.value.length - 2);
  }
  if (scan_order.value) {
    // postRequest("/mock",
    postRequest("/ReturnOrderService/tms/return/shift", {
      packageNumber: scan_order.value,
      storageBlock: scan_storage_block.value,
      depot: DEPOT_CODE,
      memo: null,
    }).then((res) => {
      if (res.status === 200) {
        dataList.value.unshift({
          id: dataList.value.length + 1,
          packageNo: scan_order.value,
          transferNo: "TODO",
          storageBlock: scan_storage_block.value,
          time: new Date().toLocaleString(),
          status: 1,
          info: t("success"),
        });
        scan_order.value = "";
        AppToast(t("success"));
      } else {
        dataList.value.unshift({
          id: dataList.value.length + 1,
          packageNo: scan_order.value,
          transferNo: "TODO",
          storageBlock: scan_storage_block.value,
          time: new Date().toLocaleString(),
          status: 0,
          info: t("fail") + " " + res.message,
        });
        scan_order.value = "";
        AppToast(t("fail") + " " + res.message, "fail", true);
      }
    });
  } else {
    AppToast(t("returnShift.请扫描退件单号"), "danger", true);
  }
};
</script>

<style lang="less" scoped></style>
